<template>
  <div class="dataBase">
    <el-scrollbar>
      <div class="box-border flex flex-justify-between flex-items-center p-20px">
        <el-card class="h-80% w-45% overflow-y-auto">
          <SubTitle title="基本信息" />
          <el-descriptions :column="1">
            <el-descriptions-item
              :label="item.label"
              v-for="(item, index) in fileDesc"
              :key="index"
            >
              <span v-if="item.key == 'fileFingerprint'">
                <el-tooltip
                  placement="top"
                  :content="props.params.tableData.md5?.toString() || '无'"
                >
                  <span>MD5,</span>
                </el-tooltip>
                <el-tooltip
                  placement="top"
                  :content="props.params.tableData.kfs?.toString() || '无'"
                >
                  <span>KFS,</span>
                </el-tooltip>
                <el-tooltip
                  placement="top"
                  :content="props.params.tableData.pfs?.toString() || '无'"
                >
                  <span>PFS,</span>
                </el-tooltip>
                <el-tooltip
                  placement="top"
                  :content="props.params.tableData.psa?.toString() || '无'"
                >
                  <span>PSA</span>
                </el-tooltip>
              </span>
              <span v-else>{{ props.params.firstItem[item.key] || '--' }}</span>
            </el-descriptions-item>
          </el-descriptions>
          <SubTitle title="分类分级信息" />
          <el-descriptions :column="1" class="mt-16px">
            <el-descriptions-item
              v-for="(columnItem, columnIndex) in columnList"
              :key="columnIndex"
              :label="columnItem.name"
            >
              <span v-if="columnItem.index == '1'">
                {{
                  props.params.firstItem.handClassificationName ||
                  props.params.firstItem.classificationName
                }}
              </span>
              <span v-else-if="columnItem.index == '2'">
                {{ props.params.firstItem.handLevelName || props.params.firstItem.levelName }}
              </span>
              <span v-else>
                {{ props.params.firstItem[`institutionFiled${columnItem.index}`] || '--' }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item
              v-for="(extendItem, extendIndex) in extendList"
              :key="extendIndex"
              :label="extendItem.name"
            >
              <span v-if="extendItem.index == '3'">
                {{ props.params.firstItem.deadlineLevelName }}
              </span>
              <span v-else>
                {{ props.params.firstItem[`field${extendItem.index}`] || '--' }}
              </span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        ->
        <el-card class="h-80% w-45% overflow-y-auto">
          <SubTitle title="文件基本信息" />
          <el-descriptions :column="1">
            <el-descriptions-item
              :label="item.label"
              v-for="(item, index) in fileDesc"
              :key="index"
            >
              <span v-if="item.key == 'fileFingerprint'">
                <el-tooltip
                  placement="top"
                  :content="props.params.tableData.md5?.toString() || '无'"
                >
                  <span>MD5,</span>
                </el-tooltip>
                <el-tooltip
                  placement="top"
                  :content="props.params.tableData.kfs?.toString() || '无'"
                >
                  <span>KFS,</span>
                </el-tooltip>
                <el-tooltip
                  placement="top"
                  :content="props.params.tableData.pfs?.toString() || '无'"
                >
                  <span>PFS,</span>
                </el-tooltip>
                <el-tooltip
                  placement="top"
                  :content="props.params.tableData.psa?.toString() || '无'"
                >
                  <span>PSA</span>
                </el-tooltip>
              </span>
              <span v-else>{{ props.params.nextItem[item.key] || '--' }}</span>
            </el-descriptions-item>
          </el-descriptions>
          <SubTitle title="分类分级信息" />
          <el-descriptions :column="1" class="mt-16px">
            <el-descriptions-item
              v-for="(columnItem, columnIndex) in columnNextList"
              :key="columnIndex"
              :label="columnItem.name"
            >
              <span v-if="columnItem.index == '1'">
                {{
                  props.params.nextItem.handClassificationName ||
                  props.params.firstItem.classificationName
                }}
              </span>
              <span v-else-if="columnItem.index == '2'">
                {{ props.params.nextItem.handLevelName || props.params.firstItem.levelName }}
              </span>
              <span v-else>
                {{ props.params.nextItem[`institutionFiled${columnItem.index}`] || '--' }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item
              v-for="(extendItem, extendIndex) in extendNextList"
              :key="extendIndex"
              :label="extendItem.name"
            >
              <span v-if="extendItem.index == '3'">
                {{ props.params.nextItem.deadlineLevelName }}
              </span>
              <span v-else>
                {{ props.params.nextItem[`field${extendItem.index}`] || '--' }}
              </span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </div>
    </el-scrollbar>
    <div>
      <el-button @click="closeOutDrawer">取消</el-button>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { infoPage } from '@/api/dataStandards/info/index'
import * as assuranceApi from '@/api/dataStandards/assurance/index'
const route = useRoute()
const dataType = ref<string>(route.query.dataType as string)
const props = defineProps({
  params: {
    type: Object,
    default: () => {}
  },
  closeOutDrawer: Function
})

const fileDesc = ref([
  { label: '文件名称：', key: 'fileName' },
  { label: '文件类型：', key: 'fileType' },
  { label: '文件指纹：', key: 'fileFingerprint' },
  { label: '归属机构：', key: 'deptName' },
  { label: '归属系统：', key: 'sysName' },
  { label: '数据保护标准:', key: 'templateName' }
])

const extendList = ref([
  {
    index: '1',
    name: '',
    required: '',
    fillingMethod: '输入框',
    presetContentMap: []
  }
])

// 获取模板扩展字段列表
const getInfoList = async () => {
  const data = await infoPage({
    page: 1,
    pageSize: 20,
    dataStandardId: props.params.firstItem.template,
    display: '1'
  })
  extendList.value = data.map((item) => {
    return {
      ...item,
      presetContentMap: item.presetContent ? JSON.parse(item.presetContent) : []
    }
  })
}

const columnList = ref([
  {
    index: '1',
    name: '',
    required: '',
    fillingMethod: '输入框',
    presetContentMap: []
  }
])
// 获取制度信息字段列表
const getAssuranceList = async () => {
  const data = await assuranceApi.assurancePage({
    dataStandardId: props.params.firstItem.template,
    display: 1,
    page: 1,
    pageSize: 20
  })
  if (data.length > 0) {
    columnList.value = data
  } else {
    columnList.value = []
  }
}

const extendNextList = ref([
  {
    index: '1',
    name: '',
    required: '',
    fillingMethod: '输入框',
    presetContentMap: []
  }
])
// 获取模板扩展字段列表
const getNextInfoList = async () => {
  const data = await infoPage({
    page: 1,
    pageSize: 20,
    dataStandardId: props.params.nextItem.template,
    display: '1'
  })
  extendNextList.value = data.map((item) => {
    return {
      ...item,
      presetContentMap: item.presetContent ? JSON.parse(item.presetContent) : []
    }
  })
}

const columnNextList = ref([
  {
    index: '1',
    name: '',
    required: '',
    fillingMethod: '输入框',
    presetContentMap: []
  }
])
// 获取制度信息字段列表
const getNextAssuranceList = async () => {
  const data = await assuranceApi.assurancePage({
    dataStandardId: props.params.nextItem.template,
    display: 1,
    page: 1,
    pageSize: 20
  })
  if (data.length > 0) {
    columnNextList.value = data
  } else {
    columnNextList.value = []
  }
}

const controlTopDesc = () => {
  if (dataType.value === 'column') {
    fileDesc.value = [
      { label: '字段名称：', key: 'column' },
      { label: '字段类型：', key: 'columnType' },
      { label: '字段描述：', key: 'comment' },
      { label: '所属表：', key: 'table' },
      { label: '所属schema：', key: 'schema' },
      { label: '所属库：', key: 'database' },
      { label: '归属机构：', key: 'deptName' },
      { label: '归属系统：', key: 'sysName' }
    ]
  } else if (dataType.value === 'table') {
    fileDesc.value = [
      { label: '表名称：', key: 'table' },
      { label: '表描述：', key: 'remark' },
      { label: '所属schema：', key: 'schema' },
      { label: '所属库：', key: 'database' },
      { label: '归属机构：', key: 'deptName' },
      { label: '归属系统：', key: 'sysName' }
    ]
  }
}

onMounted(() => {
  getInfoList()
  getAssuranceList()
  getNextInfoList()
  getNextAssuranceList()
  controlTopDesc()
})
</script>

<style lang="scss">
.dataBase {
  .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: inline-flex;
    align-items: center;
    line-height: 23px;
    padding-left: 12px;
  }
  .el-form .el-select {
    width: 100%;
  }
  :deep(.hide-expand .cell) {
    display: none;
  }
  :deep(.el-form .el-cascader) {
    width: 100%;
  }
  :deep(.operate-btn .el-button.is-text) {
    padding: 0 10px 0 0;
  }
  .el-dropdown-link:focus {
    outline: none;
  }
}
</style>
